<!--问题管理-->
<template>
  <!-- 搜索  添加 -->
  <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
     <el-form-item label="问题标题">
         <el-input v-model="queryInfo.question" placeholder="请输入" clearable />
     </el-form-item>
     <el-form-item>
         <el-button type="primary" @click="getQuestionList">搜索</el-button>
     </el-form-item>
 </el-form>
 <el-table :data="tableData" style="width: 100% ;text-align: center;">
     <el-table-column prop="id" label="问题编号" width="80" />
     <el-table-column prop="question" label="问题标题" width="300"  />
     <el-table-column prop="questionDetail" label="问题陈述" width="400" show-overflow-tooltip />
     <el-table-column prop="createTime" label="创建时间" width="100"/>
     <el-table-column prop="userId" label="提问者名称" width="100"/>
     <<el-table-column label="操作" width="250px ">
         <template #default="scope">
             <el-button size="small" @click="Look(scope.row.id)">
                 查看回复
             </el-button>
             <el-button size="small" @click="handleEdit(scope.row)">
                 修改
             </el-button>
             <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">
                 删除
             </el-button>
         </template>
         </el-table-column>
 </el-table>
 <!-- 分页 -->
 <el-pagination
     v-model:current-page="queryInfo.pageNum"
     v-model:page-size="queryInfo.pageSize"
     :page-sizes="[1, 5, 10, 20]"
     :size="size"
     layout="total, sizes, prev, pager, next, jumper"
     :total="total"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"/>

     <!-- 修改 -->
     <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle"  width="500" @close="close">
         <el-form :model="question" status-icon >
             
             <el-form-item label="问题标题" :label-width="formLabelWidth">
                 <el-input v-model="question.question" autocomplete="off" />
             </el-form-item>
             <el-form-item label="问题陈述"  :label-width="formLabelWidth"  >
                 <el-input
                     v-model="question.questionDetail"
                     style="width: 300px"
                     :rows="6"
                     type="textarea"
                     placeholder="请输入内容"
                 />
             </el-form-item>
            
         </el-form>
                     <template #footer>
                     <div class="dialog-footer">
                         <el-button @click="close">取消</el-button>
                         <el-button type="primary" @click="saveOrUpdate">
                         确定
                         </el-button>
                     </div>
                     </template>
     </el-dialog>

</template>

<script setup>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue';
import { onMounted } from 'vue'; 
import { useRouter } from 'vue-router';
const router = useRouter();
const saveOrUpdateVisible = ref(false)
const saveOrUpdateTitle = ref('')
const question = ref({
 id:'',
 question:'',
 questionDetail:'',
 createTime:'',
 userId:''
})

const tableData = ref([])
const total = ref(0)
const queryInfo = ref({
 pageNum: 1,
 pageSize: 5,
 question: ''
})
// 查看回复
const Look = (questionId) => {
 // 转调到查看回复页面
 router.replace({
     path: '/Reply',
     query: { questionId: questionId}
 });

}
// 修改
const handleEdit = (row) => {
 saveOrUpdateTitle.value = '修改问题'
 saveOrUpdateVisible.value = true
 question.value = row

}

// 取消
const close=()=>{
 saveOrUpdateVisible.value = false; 
 question.value = {
    id:'',
    question:'',
    questionDetail:'',
    createTime:'',
    userId:''
 }
}
// 确定
const saveOrUpdate=()=>{
 axios.put('/Q/update', question.value)
     .then(resp => {
         let result = resp.data;
         if (result.code == 1) {
             ElMessage({
                 message: '修改成功！',
                 type: 'success',
             })
             getQuestionList();
          
         } else {
             ElMessage({
                 message: '修改失败！',
                 type: 'warning',
                 })
         }       
     })
     saveOrUpdateVisible.value = false;
     close();
}

onMounted(() => {
 getQuestionList();
})
const getQuestionList = () => {
  axios.get('http://localhost:8080/Q/FindByPage', {
    params: queryInfo.value,
    headers: {
      'Accept': 'application/json'
    }
  })
  .then(resp => {
    let result = resp.data;
         console.log(result.data)
         total.value = result.data.total;
         if (result.code == 200) {
             tableData.value = result.data.list
         } else {
             console.log('获取问题列表失败')
         }
  })
}
// 修改
// 删除
const handleDelete = (questionId) => {
 ElMessageBox.confirm(
     '真的要删除吗？',
     '提示',
     {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning',
     })
     .then(() => {
         axios.delete('/Q/del', {
             params: { questionId: questionId }
         })
     .then(resp => {
         let result = resp.data;
         if (result.code == 1) {
             getQuestionList();
             ElMessage({
                 message: '删除成功！',
                 type: 'success',
             })
         } else {
             ElMessage({
                 message: '删除失败！',
                 type: 'warning',
             })    
            
         }
     })

  })


}
// 分页
// 当用户改变每页显示的条目数时触发
const handleSizeChange = (pageSize) => {
queryInfo.value.pageSize = pageSize;
getQuestionList();
}
// 当用户改变当前页码时触发
const handleCurrentChange = (pageNum) => {
queryInfo.value.pageNum = pageNum;
getQuestionList();
}

</script>

<style scoped>
.el-table .cell{text-align: center;}
.el-table-column{text-align: center;}
</style>